<!--设计器数据源配置表单-->

<template>
  <div class="">
    <Form :label-width="105">

      <FormItemPanel title="数据结果集应为一个数组，数组元素应该包含如下字段">
        <Table size="small" :columns="tableColumns" :data="tableData"></Table>
      </FormItemPanel>

      <FormItemPanel title="静态数据结果集编辑">
        <Button class="m-b-5px" size="small" type="primary" :style="{float: 'right'}" @click="resetDefaultResultObj">恢复默认数据</Button>
        <div class="clearfix"></div>
        <CodeEditor v-model="resultObjData" model="json" :on-blur="updateResultObj"></CodeEditor>
      </FormItemPanel>

    </Form>

  </div>
</template>

<script>

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'DatasourceSettingForm',
    components: {

    },
    props: {
      targetComp: {
        type: String,
        default: ''
      }
    },
    data() {
      return {

        invokeError: false,

        tableColumns: [
          {
            type: 'index',
            width: 30,
            align: 'center'
          },
          {
            title: '字段',
            key: 'field'
          },
          {
            title: '备注',
            key: 'remark'
          }
        ],

        resultObjData: '',
        resultObjDataFromFilter: '',

      }
    },
    mounted() {

      this.resultObjData = JSON.stringify(this.ds_resultObj, null, 2);

    },
    methods: {

      resetDefaultResultObj () {
        if (this.targetComp) {
          let compConfigData = this.$PnUtil.getCompConfigData(this.targetComp);
          this.resultObjData = JSON.stringify(compConfigData.ds_resultObj, null, 2);
          this.updateResultObj()
        }else {
          this.$Message.error('找不到目标组件')
        }
      },


      updateResultObj () {
        this.$store.commit('designer/updateLayoutItem', {
          path: 'component.compConfigData.ds_resultObj',
          value: JSON.parse(this.resultObjData)
        });
      }

    },
    computed: {
      ...mapFields({

        text: 'component.compConfigData.text',

        ds_type: 'component.compConfigData.ds_type',

        ds_resultObjTemplate: 'component.compConfigData.ds_resultObjTemplate',
        ds_resultObj: 'component.compConfigData.ds_resultObj'

      }),

      tableData () {
        let arr = [];
        this.ds_resultObjTemplate.forEach(item=>{
          arr.push({
            field: item.field,
            remark: item.remark
          })
        });
        return arr;
      }
    },
    watch: {
      'ds_type': {
        handler: function () {
          if (this.ds_type == 'static') {
            this.resultObjData = JSON.stringify(this.ds_resultObj, null, 2)
          }
        }
      },
      'ds_resultObj': {
        handler: function () {
          this.resultObjData = JSON.stringify(this.ds_resultObj, null, 2)
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
  >>> .ivu-timeline-item-tail {
    border-left: 1px solid #bdbdbd !important;
  }

  .ivu-form-item {
    margin-bottom: 5px;
  }

  .time-line-item-label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
  }
</style>
